<template>
	<view class="sr-container">
		<image class="sr-show" :src="data.picURL"></image>
		<view class="sr-text-container">
			<view class="sr-name">{{data.name}}</view>
			<view class="sr-discount">{{data.discount}}折</view>
			<view class="sr-price">￥{{data.price}}</view>
		</view>
		<image class="add-sr" src="@/page_fruit/static/fruit/add.png" mode="widthFix" ></image>
	</view>
</template>

<script>
	import {reactive} from 'vue'
	export default{
		name:"shop-recommend",
		setup(props, context) {
			let data = reactive({
				name:"夏日果切拼盘嘿嘿嘿嘿",
				discount:0.3,
				price:55,
				picURL:"https://ts1.cn.mm.bing.net/th/id/R-C.15ce330326547bed07080a077d2d6196?rik=t0gMXuty4VQjEQ&riu=http%3a%2f%2fpic27.nipic.com%2f20130308%2f6789926_182239056000_2.jpg&ehk=KFVLz4kgl0HCVHmP2n2ZM8KOVxpqNrwqNVdG1pCZnKA%3d&risl=&pid=ImgRaw&r=0"
			});
			
			return {
				data
			}
		}
	}
</script>

<style scoped>
	.sr-container{
		margin:5rpx 16rpx;
		position: relative;
	}
	
	.sr-show{
		width: 210rpx;
		height: 210rpx;
	}
	
	.sr-name{
		height: 40rpx;
		width: 200rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		margin: 3rpx 0rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.sr-discount{
		height: 30rpx;
		width: fit-content;
		color: #cd5f4e;
		margin: 3rpx 0rpx 0 0;
		font-size: 24rpx;
		padding: 2rpx 6rpx;
		border-radius: 10rpx;
		border: 1rpx solid #cd5f4e;
	}
	
	.sr-price{
		height: 45rpx;
		line-height: 45rpx;
		margin-top: 5rpx;
		font-size: 38rpx;
		color: #cd5f4e;
		font-weight: bold;
	}
	
	.add-sr{
		width: 50rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}
</style>